<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {margin: 0; padding: 0;}
            li {list-style: none;}
            #ul1 { width: 600px; height: 600px; background: #ccc; margin: 20px auto; position: relative;}
            #ul1 dt { width: 180px; height: 180px;margin: 10px; float: left;z-index:1; }
        </style>
        <script>
            function getStyle (obj,attr)
            {
                if(obj.currentStyle)
                {
                    return obj.currentStyle[attr];
                }
                else
                {
                    return getComputedStyle(obj,false)[attr];
                }
            }

            function startMove (obj,json,fn)
            {
                clearInterval(obj.timer);
                obj.timer = setInterval(function(){
                    var bStop = true;
                    for(var attr in json)
                    {
                        var iCur = 0;

                        if(attr=='opacity')
                        {
                            iCur = parseInt(parseFloat(getStyle(obj,attr))*100);
                        }
                        else
                        {
                            iCur = parseInt(getStyle(obj,attr));
                        }

                        var iSpeed = (json[attr]-iCur)/8;
                        iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

                        if(iCur!=json[attr])
                        {
                            bStop = false;
                        }


                            if(attr=='opacity')
                            {
                                obj.style.filter = 'alpha(opacity:'+(iCur+iSpeed)+')';
                                obj.style.opacity = (iCur+iSpeed)/100;
                            }
                            else
                            {
                                obj.style[attr] = iCur+iSpeed+'px';
                            }

                    }
                    if(bStop)
                    {
                        clearInterval(obj.timer);

                            if(fn)
                            {
                                fn();
                            }
                    }
                },30)
            }
        </script>
        <script type="text/javascript">
            window.onload = function ()
            {
                var oUl = document.getElementById('ul1');
                var aLi = oUl.getElementsByTagName('img');
                var iMinZindex=2;
                var i = 0;

                //1、布局转换
                for (i=0;i<aLi.length;i++)
                {
                    aLi[i].style.left = aLi[i].offsetLeft+'px';
                    aLi[i].style.top = aLi[i].offsetTop+'px';
                }
                for (i=0;i<aLi.length;i++)
                {
                    aLi[i].style.position = 'absolute';
                    aLi[i].style.margin = '0';
                }

                //2、加事件
                for (i=0;i<aLi.length;i++)
                {

                    aLi[i].onmouseover = function ()
                    {
                        this.style.zIndex=iMinZindex++;
                        startMove(this,{width:240,height:240,marginLeft: -30, marginTop: -30})
                    }
                    aLi[i].onmouseout = function ()
                    {
                        startMove(this,{width:180,height:180,marginLeft: 0, marginTop: 0})
                    }
                }
            }
        </script>
    </head>
    <body>
        <dl id="ul1">
            <dt><img src="images/1.jpg" /></dt>
            <dt><img src="images/2.jpg" /></dt>
            <dt><img src="images/3.jpg" /></dt>
            <dt><img src="images/4.jpg" /></dt>
            <dt><img src="images/5.jpg" /></dt>
            <dt><img src="images/6.jpg" /></dt>
            <dt><img src="images/7.jpg" /></dt>
            <dt><img src="images/8.jpg" /></dt>
            <dt><img src="images/9.jpg" /></dt>
        </dl>
    </body>
</html>
